<template>
  <div>
    <div id="head">
      <img
        src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3517619663,3121583733&fm=26&gp=0.jpg"
        style="width: 100%; height: 200px"
      />
    </div>

    <div class="divSt">
      <span id="my" style="float='left'; width=350px">我国对比图</span>
    </div>
    <div class="divSt">
      <span id="cc" style="float='right'; " width="350px">金砖国对比图</span>
    </div>

    <div id="currenAdd"></div>
  </div>
</template>

<script>
let echarts = require("echarts");
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    getOption2() {
      return {
        title: {
          text: "国内新增确诊人数城市排名top5",
        },
        dataset: {
          source: [
            ["score", "amount", "product"],
            [20, 1, "辽宁"],
            [40, 2, "广东"],
            [60, 5, "上海"],
            [80, 25, "香港"],
            [100, 53, "河北"],
          ],
        },
        grid: { containLabel: true },
        xAxis: { name: "amount" },
        yAxis: { type: "category" },
        visualMap: {
          orient: "horizontal",
          left: "center",
          min: 10,
          max: 100,
          text: ["High ", "Low "],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ["#D7DA8B", "#E15457"],
          },
        },
        series: [
          {
            type: "bar",

            encode: {
              // Map the "amount" column to X axis.
              x: "amount",
              // Map the "product" column to Y axis
              y: "product",
            },
          },
        ],
      };
    },
    toDraw2() {
      let chart = echarts.init(document.getElementById("my"));
      let option2 = this.getOption2();
      chart.setOption(option2);
    },
    getOption1() {
      return {
        color: ["#3398DB"],
        title: {
          text: "境外输入省级top10",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "上海",
              "广东",
              "黑龙江",
              "四川",
              "陕西",
              "内蒙古",
              "福建",
              "北京",
              "天津",
              "山西",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "新增人数",
            type: "bar",
            barWidth: "60%",
            data: [1194, 666, 389, 303, 276, 261, 222, 205, 169, 91],
          },
        ],
      };
    },
    toDraw1() {
      let chart = echarts.init(document.getElementById("cc"));
      let option1 = this.getOption1();
      chart.setOption(option1);
    },
    getOption() {
      return {
        color: ["#5793f3", "#d14a61"],
        title: {
          text: "新增本土确诊/新增境外输入确诊 趋势",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["新增本土确诊", "新增境外输入确诊"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "3.6",
            "3.24",
            "4.11",
            "4.29",
            "5.17",
            "6.4",
            "6.22",
            "7.10",
            "7.28",
            "8.15",
            "9.2",
            "9.20",
            "10.8",
            "10.26",
            "11.13",
            "12.3",
            "12.19",
            "1.6",
          ],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            name: "新增境外输入确诊",
            type: "line",

            data: [
              4,
              47,
              38,
              5,
              1,
              2,
              5,
              9,
              7,
              4,
              15,
              10,
              9,
              13,
              15,
              17,
              21,
              11,
              9,
            ],
          },
          {
            name: "新增本土确诊",
            type: "line",

            data: [
              15,
              45,
              90,
              75,
              45,
              38,
              30,
              15,
              28,
              16,
              21,
              25,
              35,
              10,
              20,
              17,
              25,
              28,
              10,
              13,
              15,
              17,
            ],
          },
        ],
      };
    },
    toDraw() {
      let chart = echarts.init(document.getElementById("currenAdd"));
      let option = this.getOption();
      chart.setOption(option);
    },
  },
  created() {
    console.log(document.getElementById("currenAdd"));
  },
  mounted() {
    // console.log(document.getElementById("currenAdd"), "=====");
    this.toDraw();
    this.toDraw1();
    this.toDraw2();
  },
};
</script>
<style scoped>
#currenAdd {
  height: 300px;
  width: 100%;
}
#cc {
  /* float: left; */
  height: 300px;
  width: 300px;
}
#my {
  /* float: right; */
  height: 300px;
  width: 300px;
}
.divSt {
  width: 45%;
  display: inline-block;
}
</style>